<!--
 * @Description: 
 * @version: 
 * @Author: erze
 * @Date: 2021-05-18 15:39:29
 * @LastEditors: erze
 * @LastEditTime: 2021-05-18 21:31:42
-->
<template>
  <div id="app">
    <z-form :model="userinfo" :rules="rules" ref="form">
      <ZFormItem label="用户名" prop="user">
        <z-input v-model="userinfo.user" placeholder="请输入用户名"/>
      </ZFormItem>
      <ZFormItem label="密码" prop="pass">
        <z-input v-model="userinfo.pass" type="password" placeholder="请输入密码"/>
      </ZFormItem>
    </z-form>
    <Button @click="handle_Login()">登录</Button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      userinfo: {
        user: "",
        pass: ""
      },
      rules: {
        user: [{ required: true, message: "账号不能为空" }],
        pass: [{ required: true, message: "密码能为空" }]
      }
    };
  },
  methods: {
    handle_Login() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          alert("欢迎你，" + this.userinfo.user);
        } else {
          console.log("error submit!!");
        }
      });
    }
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
</style>
